@props([
    'title' => '',
    'description' => '',
    'action' => null,
    'actionText' => '',
    'actionRoute' => null,
    'actionIcon' => null
])

<div class="md:flex md:items-center md:justify-between">
    <div class="flex-1 min-w-0">
        <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
            {{ $title }}
        </h2>
        @if($description)
            <p class="mt-1 text-sm text-gray-500">
                {{ $description }}
            </p>
        @endif
    </div>
    @if($action || $actionRoute)
        <div class="mt-4 flex space-x-3 md:mt-0 md:ml-4">
            @if($actionRoute)
                <a href="{{ $actionRoute }}" 
                   class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    @if($actionIcon)
                        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            {!! $actionIcon !!}
                        </svg>
                    @endif
                    {{ $actionText }}
                </a>
            @else
                {{ $action }}
            @endif
        </div>
    @endif
</div>
